<template>
	<view>
		<u-navbar back-text="返回" :customBack="back" backIconColor="#fff" :backTextStyle="{'color':'#fff'}"
			:background="background"></u-navbar>
		<view class="content">
			<view class="title">欢迎登录窝窝AI</view>
			<view class="uni-input-wrapper">
				<input type="text" placeholder="请输入手机号" maxlength="11" v-model="phoneNumber" />
			</view>
			<view class="uni-input-wrapper">
				<input type="text" placeholder="请输入验证码" maxlength="6" v-model="verifyCode" />
				<button class="btn-text" @click="getVerifyCode" :disabled="countdown > 0">
					{{ countdown > 0 ? countdown + 's 后重发' : '获取验证码' }}
				</button>
			</view>
			<view class="agreement">
				<checkbox style="transform:scale(0.7)" :checked="agree" @click="agree = !agree"></checkbox>
				<text>同意并阅读</text>
				<navigator url="/pages/login/xieyi">《隐私保护协议》</navigator>
			</view>
			<button @click="submit" :style="[inputStyle]" :disabled="isDisabled" class="getCaptcha">登录/注册</button>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: this.TopColor,
				// appID: 'wx57844af547d06258',
				phoneNumber: '',
				verifyCode: '', //用户输入的验证码
				localVerifyCode: '', //本地的验证码
				countdown: 0,
				agree: false,
				isDisabled:true
			}
		},
		onLoad() {
			this.wechatLogin
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.phoneNumber && this.verifyCode) {
					style.color = "#fff";
					this.isDisabled = false
					// style.backgroundImage = 'linear-gradient(45deg, #008de8, #9fccff)';
				}
				return style;
			}
		},
		methods: {
			back() {
				this.$common.switchTabTo('/pages/index/index');
			},
			async submit() {
				if (!this.phoneNumber) {
					return this.$common.errorToShow('请输入手机号');
				}
				if (!this.$u.test.mobile(this.phoneNumber)) {
					return this.$common.errorToShow('请输入正确的手机号');
				}
				if (!this.verifyCode) {
					return this.$common.errorToShow('请输入验证码');
				}
				if (!this.agree) {
					return this.$common.errorToShow('请先同意隐私保护协议');
				}
				if (!this.phoneNumber) {
					return false;
				}
				this.isDisabled = false
				if (this.verifyCode == this.localVerifyCode) {
					let userInfoPromise = this.$http.post('/user/login', {
						"phoneNumber": this.phoneNumber
					})
					const userInfo = await userInfoPromise
					if (userInfo.success) {
						this.$db.set("userInfo", userInfo.data);
						this.$common.successToShow('登录成功', () => {
							this.$common.switchTabTo('/pages/index/index')
						})
					}else{
						console.log("登录错误：",userInfo.errMessage)
					}
				} else {
					this.$common.errorToShow("验证码错误！")
				}
			},
			//获取验证码
			getVerifyCode() {
				if (!this.phoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.$u.test.mobile(this.phoneNumber)) {
					return this.$common.errorToShow('请输入正确的手机号');
				}
				
				let code = '';
				for (let i = 0; i < 6; i++) {
					code += Math.floor(Math.random() * 10);
				}
				this.localVerifyCode = code;
				console.log("电话号码：", this.phoneNumber, "验证码：", code)

				//暂时注释掉
				uniCloud.callFunction({
					name: 'sendSMS',
					data: {
						phoneNumber: this.phoneNumber,
						verifyCode: code
					}
				}).then(res => {
					console.log('验证码发送成功')
					console.log(res)
				});
				this.countdown = 60;
				const interval = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						this.localVerifyCode = ''
						clearInterval(interval);
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 80rpx 60rpx 30rpx 60rpx;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}

		.getCaptcha {
			background-color: #8dcdff;
			color: #FFFFFF;
			border: none;
			font-size: 30rpx;
			margin: 80rpx 0;

			&::after {
				border: none;
			}
		}

		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}

	.buttom {
		.loginType {
			display: flex;
			padding: 300rpx 150rpx 150rpx 150rpx;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}

		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
			text-align: center;

			.link {
				color: $u-type-warning;
			}
		}
	}

	.uni-input-wrapper {
	
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		 border-bottom: 1px solid #f9f8f7; 
	}

	.uni-input-wrapper input {
		flex: 1;
		font-size: 30rpx ;
	}

	.uni-input-wrapper button {
		margin-left: 10px;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-top: 60rpx;
		font-size: 26rpx;
		margin-left: 80rpx;
	}
	.btn-text{
		width: 200rpx;
		font-size: 28rpx ;
		 background-color: #9fccff;
		color: #fff;
		
	}
</style>